<template>
  <el-form
    v-bind="{...formConfig,...$attrs}"
    v-on="{...formConfig.events,...$listeners}"
    v-model="value"
  >
    <el-form-item
      v-for="(item,index) in formConfig.formItems"
      v-bind="item"
      :key="index+'formItem'"
    >
      <component
        :is="__getChildComponents(item.type)"
        ref="componentRef"
        :formVM="getSelf"
        :formItem="item"
      ></component>
    </el-form-item>
  </el-form>
</template>

<script>
import {RenderUtils} from "./RenderUtils";
import {FormConfig} from "./ConfigType";
import ShowTooltip from "../../directive/VshowTooltip/VshowTooltip";
import typeOfUtils from "../../utils/type-of-utils";

export default {
  name: "DynamicForm",
  props: {
    value: {
      type: Object,
      default: () => {
      },
      required: true,
    },
    formConfig: {
      type: FormConfig,
      default: () => {
      },
      required: true,
    },
    labelAppend: {
      type: String,
      default: '',
    },
    scrollXToElement: Function, // 没有找到滚动元素时，会调用这个方法，参数：prop 返回HTMLElement
  },
  directives: {
    ShowTooltip
  },
  data() {
    return {}
  },
  computed: {
    getSelf() {
      return this
    },
  },
  created() {
  },
  methods: {
    __getChildComponents: RenderUtils.getChildComponents,
    initValue() {
      const componentRef = this.$refs.componentRef;
      if (typeOfUtils.isArray(componentRef)) {
        componentRef.forEach(i => {
          i.__initValue()
        })
      } else {
        componentRef.__initValue()
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
